<template>
  <div id="ZQTJGZL">
    <p style="text-align: center; margin: 10px 0">砖砌体结构质量检查和验收表</p>
    <table border="1" width="100%">
      <tr>
        <th colspan="5">房屋验收层数</th>
        <th colspan="3">{{ number }}</th>
      </tr>
      <tr>
        <th colspan="5">验收内容</th>
        <th>设计要求及规程规定</th>
        <th>最小/实际抽样数量</th>
        <th>检查结果</th>
      </tr>
      <tr>
        <td rowspan="6">主控项目</td>
      </tr>
      <tr>
        <td>1</td>
        <td colspan="3">砖强度等级和生产龄期</td>
        <td>第6.4.2条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG1">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td colspan="3">砂浆强度等级</td>
        <td>第6.4.3条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG2">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="3">灰缝饱满度</td>
        <td>第6.4.4条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG3">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td colspan="3">转角处和纵横墙交接处的墙体砌筑</td>
        <td>第6.4.5条</td>
        <td>全/</td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG4">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td colspan="3">圈梁构造柱设置及交接处墙</td>
        <td>第6.4.6条</td>
        <td>全/</td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG5">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td rowspan="4">一般项目</td>
      </tr>
      <tr>
        <td>1</td>
        <td colspan="3">组砌方法</td>
        <td>第6.4.8条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG6">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td colspan="3">灰缝厚度</td>
        <td>第6.4.9条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG7">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="3">砌体尺寸、位置允许偏差</td>
        <td>第6.4.10条</td>
        <td></td>
        <td>
          <van-radio-group v-model="DJJCData.JCJG8">
            <van-radio name="1">合格</van-radio>
            <van-radio name="2">不合格</van-radio>
          </van-radio-group>
        </td>
      </tr>
      <tr v-for="(item1, index1) in ImgData" :key="index1">
        <td style="text-align: left; padding: 10px" colspan="8">
          <span style="margin-right: 40%">{{ item1.name }}</span>
          <p>
            <van-uploader @click-upload="getList(item1)" :after-read="afterRead" :before-delete="delectFile"
              v-model="item1.fileList" multiple />
          </p>
        </td>
      </tr>
      <tr>
        <td style="text-align: left; padding: 10px" colspan="8">
          <p>
            <van-field :class="{
              smallFontSize: showEdition,
              mediumFontSize: !showEdition,
            }" v-model="DJJCData.SGDWJCJG" placeholder="请填写检查结果" label="施工单位（工匠）检查结果" />
          </p>
          <div style="float: left">
            <p>
              <!-- <van-field :class="{
                smallFontSize: showEdition,
                mediumFontSize: !showEdition,
              }" v-model="DJJCData.SGDWJCR" placeholder="请填写检查人员" label="检查人员：" /> -->
              <qianzi :placeholder="'请填写检查人员'" :file="fileshouxie1" :GROUPGUID="`砖砌体结构质量检查和验收表_${this.number}_施工单位检查人员`" :ROW_GUID="rowData.ROW_GUID"></qianzi>
            </p>
            <p>
              <van-field readonly clickable name="datetimePicker" :value="DJJCData.SGDWJCSJ" label="检查时间："
                placeholder="请选择检查时间" @click="showPickerq = true" :class="{
                  smallFontSize: showEdition,
                  mediumFontSize: !showEdition,
                }" />
              <van-popup v-model="showPickerq" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @cancel="showPickerq = false"
                  @confirm="onConfirmRQ" />
              </van-popup>
              <!--                <van-field  v-model="DJJCData.SGDWJCJGSJ" label="检查时间："  />-->
            </p>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: left; padding: 10px" colspan="8">
          <p>
            <van-field :class="{
              smallFontSize: showEdition,
              mediumFontSize: !showEdition,
            }" v-model="DJJCData.YZYSJL" placeholder="请填写验收结论" label=" 业主（监理）验收结论" />
          </p>
          <div style="float: left">
            <p>
              <!-- <van-field :class="{
                smallFontSize: showEdition,
                mediumFontSize: !showEdition,
              }" v-model="DJJCData.YZYSR" placeholder="请填写检查人员" label="检查人员：" /> -->
              <qianzi :placeholder="'请填写检查人员'" :file="fileshouxie1" :GROUPGUID="`砖砌体结构质量检查和验收表_${this.number}_业主检查人员`" :ROW_GUID="rowData.ROW_GUID"></qianzi>
            </p>
            <p>
              <van-field readonly clickable name="datetimePicker" :value="DJJCData.YZYSSJ" label="检查时间："
                placeholder="请选择检查时间" @click="showPicker = true" :class="{
                  smallFontSize: showEdition,
                  mediumFontSize: !showEdition,
                }" />
              <van-popup v-model="showPicker" position="bottom">
                <van-datetime-picker v-model="currentDate1" type="date" title="选择年月日" @cancel="showPicker = false"
                  @confirm="onConfirmR" />
              </van-popup>
              <!--                <van-field :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" v-model="DJJCData.YZJCJCSJ" label="检查时间："  />-->
            </p>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: left; padding: 10px" colspan="8">
          <p>附件：</p>
          <p @click="seeFile" style="color: blue">
            《农民自建低层住宅结构施工及验收规程》和条文说明
          </p>
        </td>
      </tr>
    </table>
    <div class="footer" v-if="!$route.query.type">
      <van-button size="small" type="info" @click="save">保存</van-button>
    </div>
  </div>
</template>
<script>
import {
  InsertDataView,
  dataServerOpenDataView,
  updateDataView,
  FileServerUpload,
  GetFileData,
  DelectFile,
  FileServerProxy,
  dataTransFilePreview,
  dataTransFile,
} from "../../../utils/api";
import dd from "gdt-jsapi";
import qianzi from '../../../common/qianzi.vue'
export default {
  components: {},
  data() {
    return {
      showEdition: "",
      DJJCData: {
        JCJG1: "1",
        JCJG2: "1",
        JCJG3: "1",
        JCJG4: "1",
        JCJG5: "1",
        JCJG6: "1",
        JCJG7: "1",
        JCJG8: "1",
        SGDWJCJG: "",
        SGDWJCR: "",
        SGDWJCSJ: "",
        YZYSJL: "",
        YZYSR: "",
        YZYSSJ: "",
      },
      fileshouxie: [
        {
          title: '请填写检查人员',
          FileName: '无',
          groupGuid: `砖砌体结构质量检查和验收表_${this.number}_施工单位检查人员`,
          fileList: [],
        },
      ],
      fileshouxie1: [
        {
          title: '请填写检查人员',
          FileName: '无',
          groupGuid: `砖砌体结构质量检查和验收表_${this.number}_业主检查人员`,
          fileList: [],
        },
      ],
      ROW_GUID: "",
      PKID:"",
      rowData: "",
      isAdd: true,
      currentDate: new Date(),
      currentDate1: new Date(),
      showPickerq: false,
      showPicker: false,
      ImgData: [
        {
          name: "钢筋合格证照片",
          groupGuid: "96438fb5-730c-4988-bf72-683afa34d0ec",
          fileList: [],
        },
        {
          name: "水泥合格证照片",
          groupGuid: "59fdf4eb-339d-446c-adf1-03ef4db07b33",
          fileList: [],
        },
        {
          name: "石子沙合格证照片",
          groupGuid: "2a81f070-ac04-4faf-881a-1b3638b5f8ef",
          fileList: [],
        },
        {
          name: "现场照片合格证照片",
          groupGuid: "2480b483-f688-48e9-9170-262279c540fa",
          fileList: [],
        },
      ],
      number: "",
    };
  },
  methods: {
    seeFile() {
      dd.ready(function () {
        dd.openLink({
          url: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/文明.pdf",
        })
          .then((res) => {
          })
          .catch((err) => {
            console.error(err);
          });
      });
    },
    defaultField() {
      let dateTime;
      let yy = new Date().getFullYear();
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      dateTime = yy + "-" + mm + "-" + dd;
      this.DJJCData.SGDWJCSJ = dateTime;
      this.DJJCData.YZYSSJ = dateTime;
    },
    save: async function () {
      // let data = this.DJJCData;
      // data.ROW_GUID = this.ROW_GUID;
      // data.TO_ROW_GUID = this.rowData.ROW_GUID;
      // let params = {
      //   dataGuid: "61008763-b3ab-4b7f-ba80-329bd54cbeeb",
      //   strParams: JSON.stringify([data]),
      //   token: window.localStorage.getItem("token"),
      // };
      // if (this.isAdd) {
      //   const res = await InsertDataView(params);
      //   if (res.data.Success) {
      //     this.$toast.success('成功！');
      //   }
      // } else {
      //   const res = await updateDataView(params);
      //   if (res.data.Success) {
      //     this.$toast.success('修改成功!');
      //   }
      // }

      if (this.isAdd) {
        let datas = this.DJJCData;
        datas.ROW_GUID = this.ROW_GUID;
        datas.TO_ROW_GUID = this.rowData.ROW_GUID;
        datas.CS = this.number;
        let params = {
          accessCode: "0fb3f6123d1b4fe6851c99532c463f6f",
          cityCode: window.localStorage.getItem("citycode")
            ? window.localStorage.getItem("citycode")
            : "441300000000",
          params: {
            dataGuid: "61008763-b3ab-4b7f-ba80-329bd54cbeeb",
            strParams: JSON.stringify([datas]),
          },
        };
        const res = await FileServerProxy(params);
        let data = JSON.parse(res.data.data).Success;
        if (data) {
          this.$toast.success("成功！");
        }
      } else {
        let datae = this.DJJCData;
        datae.ROW_GUID = this.ROW_GUID;
        datae.TO_ROW_GUID = this.rowData.ROW_GUID;
        datae.CS = this.number;
        datae.PKID = this.PKID;
        let params = {
          accessCode: "77ad6c1591e54d4fbc45ecc90374a2a2",
          cityCode: window.localStorage.getItem("citycode")
            ? window.localStorage.getItem("citycode")
            : "441300000000",
          params: {
            dataGuid: "61008763-b3ab-4b7f-ba80-329bd54cbeeb",
            strParams: JSON.stringify([datae]),
          },
        };

        const res = await FileServerProxy(params);
        let data = JSON.parse(res.data.data).Success;
        if (data) {
          this.$toast.success("修改成功!");
        }
        // if (res.data.Success) {
        //   this.$toast.success('修改成功!');
        // }
      }
    },
    delectFile: async function (file) {
      // if (file.ROW_GUID) {
      //   const res = await DelectFile({
      //     fileGuid: file.ROW_GUID,
      //     token: window.localStorage.getItem("token"),
      //   });
      // }
      // if (file.ROW_GUID) {
      //   let params = {
      //     "accessCode": "ce9b691634de4ebca68dc5bb638d07f4",
      //     "cityCode": "441300000000",
      //     "params": {
      //       "fileGuid": file.ROW_GUID,
      //       token: window.localStorage.getItem('token')
      //     }
      //   }
      //   const res = await FileServerProxy(params)
      // }
      let fileguid = "";
      if (file.ROW_GUID) {
        fileguid = file.ROW_GUID;
      } else {
        fileguid = this.fileGuid;
      }
      if (fileguid) {
        let params = {
          accessCode: "ce9b691634de4ebca68dc5bb638d07f4",
          cityCode: window.localStorage.getItem("citycode")
            ? window.localStorage.getItem("citycode")
            : "441300000000",
          params: {
            fileGuid: fileguid,
          },
        };
        const res = await FileServerProxy(params);
        let data = JSON.parse(res.data.data).Success;
        if (data) {
          this.$toast.success("删除成功!");
        }
      }
    },
    afterRead(file) {
      this.getFileServerUpload(file.file);
    },
    getFile: async function () {
      let groupGuid = [];
      this.ImgData.forEach((item) => {
        groupGuid.push(item.groupGuid);
      });
      // const res1 = await GetFileData({
      //   groupGuid: groupGuid.join(","),
      //   toRowGuid: this.rowGuid,
      // });
      // if (res1.data.FilesInfo.length > 0) {
      //   res1.data.FilesInfo.forEach((element) => {
      //     this.ImgData.forEach((items) => {
      //       // item.children.forEach(items => {
      //       if (element.GROUPGUID == items.groupGuid) {
      //         element["isImage"] = true;
      //         element["url"] =
      //           window.g.BaseURL +
      //           "FileServer/api/Preview?token=" +
      //           window.localStorage.getItem("token") +
      //           "&" +
      //           "fileGuid=" +
      //           encodeURIComponent(element.ROW_GUID);
      //         items.fileList.push(element);
      //       }
      //       // })
      //     });
      //   });
      // }
      let params = {
        accessCode: "1fdcbce42c6d4748a020feba618d54b8",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: {
          groupGuid: groupGuid.join(","),
          toRowGuid: this.rowGuid,
        },
      };
      const res = await FileServerProxy(params);
      let data = JSON.parse(res.data.data).FilesInfo;
      if (data.length > 0) {
        data.forEach((element) => {
          this.ImgData.forEach((items) => {
            if (element.GROUPGUID == items.groupGuid) {
              this.getFileUrl(element, items);
              // element['isImage'] = true
              // element['url'] =
              //   window.g.BaseURL +
              //   'FileServer/api/Preview?token=' +
              //   window.localStorage.getItem('token') +
              //   '&' +
              //   'fileGuid=' +
              //   encodeURIComponent(element.ROW_GUID)
              // items.fileList.push(element)
            }
          });
        });
      }
    },
    //获取附件文件流
    getFileUrl: async function (element, item) {
      let formData = new FormData();
      formData.append("accessCode", "98bcf528966e48ce896a8b3fd02d45d5");
      formData.append(
        "cityCode",
        window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000"
      );
      formData.append(
        "paramStr",
        JSON.stringify({
          fileGuid: element.ROW_GUID,
        })
      );
      let response = await dataTransFilePreview(formData);
      if (response) {
        var img = new Blob([new Int8Array(response.data, 0)], {
          type: response.headers["content-type"],
        }); //type类型可自定义
        element["isImage"] = true;
        element["url"] = window.URL.createObjectURL(img);
        item.fileList.push(element);
      }
    },
    getFileServerUpload: async function (file) {
      let data = {
        toRowGuid: this.rowGuid,
        groupGuid: this.groupGuids,
      };
      let formData = new FormData();
      formData.append("file", file);
      formData.append("accessCode", "7a3fc061c866434b8475d3775c9ddcea");
      formData.append(
        "cityCode",
        window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000"
      );
      // formData.append("token", window.localStorage.getItem("token"));
      formData.append("paramStr", JSON.stringify(data));
      // formData.append("toRowGuid", this.rowGuid);
      // formData.append("groupGuid", this.groupGuids);
      // formData.append("token", window.localStorage.getItem("token"));
      // const res = await FileServerUpload(formData);
      const res = await dataTransFile(formData);
      let data1 = JSON.parse(res.data.data).FileList;
      this.fileGuid = data1[0].FILEGUID;
      if (data1[0].FILEGUID) {
        this.$toast.success("上传成功!");
      }
      // if (res.data.Success == true) {
      //   this.$toast.success('上传成功!');
      // }
    },
    getList(item) {
      this.groupGuids = item.groupGuid;
    },
    onConfirmR(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.DJJCData.YZYSSJ = `${year}-${month}-${day}`;
      this.showPicker = false;
    },
    onConfirmRQ(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.DJJCData.SGDWJCSJ = `${year}-${month}-${day}`;
      this.showPickerq = false;
    },
    getData: async function () {

      // let dataGuid = "61008763-b3ab-4b7f-ba80-329bd54cbeeb";
      // let searchObject = encodeURIComponent(
      //   JSON.stringify([
      //     { field: "to_row_guid", value: this.rowData.ROW_GUID, operator: "=" },
      //   ])
      // );
      // let token = window.localStorage.getItem("token");
      // const res = await dataServerOpenDataView(dataGuid, searchObject, token);
      // if (res.data.Data.length > 0) {
      //   this.DJJCData = res.data.Data[0];
      // }
      // if (res.data.Data.length > 0) {
      //   this.ROW_GUID = res.data.Data[0].ROW_GUID;
      //   this.isAdd = false;
      // } else {
      //   this.ROW_GUID = this.newGuid();
      //   this.isAdd = true;
      // }
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: {
          dataguid: "61008763-b3ab-4b7f-ba80-329bd54cbeeb",
          searchObject: JSON.stringify([
            {
              field: "to_row_guid",
              value: this.rowData.ROW_GUID,
              operator: "=",
            },
            { field: "CS", value: this.number, operator: "=" },
          ]),
        },
      };
      const res = await FileServerProxy(params);
      let data = JSON.parse(res.data.data).Data;
      if (data.length > 0) {
        for (let i in this.DJJCData) {
          this.DJJCData[i] = data[0][i];
        }
      }
      if (data.length > 0) {
        this.ROW_GUID = data[0].ROW_GUID;
        this.PKID = data[0].PKID;
        this.isAdd = false;
      } else {
        this.ROW_GUID = this.newGuid();
        this.isAdd = true;
      }
    },
    newGuid(format) {
      //表示全局唯一标识符 (GUID)。
      function Guid(g) {
        var arr = new Array(); //存放32位数值的数组
        if (typeof g == "string") {
          //如果构造函数的参数为字符串
          InitByString(arr, g);
        } else {
          InitByOther(arr);
        }
        //返回 Guid 类的此实例值的 String 表示形式。
        this.ToString = function (format) {
          if (typeof format == "string") {
            if (
              format == "N" ||
              format == "D" ||
              format == "B" ||
              format == "P"
            ) {
              return ToStringWithFormat(arr, format);
            } else {
              return ToStringWithFormat(arr, "D");
            }
          } else {
            return ToStringWithFormat(arr, "D");
          }
        };

        //由字符串加载
        function InitByString(arr, g) {
          g = g.replace(/\{|\(|\)|\}|-/g, "");
          g = g.toLowerCase();
          if (g.length != 32 || g.search(/[^0-9,a-f]/i) != -1) {
            InitByOther(arr);
          } else {
            for (var i = 0; i < g.length; i++) {
              arr.push(g[i]);
            }
          }
        }

        //由其他类型加载
        function InitByOther(arr) {
          // var i = 32;
          // while (i--) {
          //     arr.push("0");
          // }

          var i = 32;
          while (i--) {
            arr.push(Math.floor(Math.random() * 16.0).toString(16));
          }
        }

        /*
            根据所提供的格式说明符，返回此 Guid 实例值的 String 表示形式。
            N  32 位： xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            D  由连字符分隔的 32 位数字 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
            B  括在大括号中、由连字符分隔的 32 位数字：{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}
            P  括在圆括号中、由连字符分隔的 32 位数字：(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
            */

        //增加一个标识能区分开这个guid是不是由前端生成的
        function ToStringWithFormat(arr, format) {
          switch (format) {
            case "N":
              return arr.toString().replace(/,/g, "");
            case "D":
              var str =
                arr.slice(0, 8) +
                "-1203" +
                "-" +
                arr.slice(12, 16) +
                "-" +
                arr.slice(16, 20) +
                "-" +
                arr.slice(20, 32);
              str = str.replace(/,/g, "");
              return str;
            case "B":
              var str = ToStringWithFormat(arr, "D");
              str = "{" + str + "}";
              return str;
            case "P":
              var str = ToStringWithFormat(arr, "D");
              str = "(" + str + ")";
              return str;
            default:
              return new Guid();
          }
        }

        return this.ToString();
      }

      var g = new Guid();
      return g.ToString(format);
    },
  },
  components:{qianzi},
  mounted() {
    this.showEdition = this.$store.state.Edition;
    this.defaultField();
    this.number = this.$route.query.number;
    this.rowData = JSON.parse(this.$route.query.data);
    this.rowGuid = this.rowData.ROW_GUID;
    this.tableData = JSON.parse(this.$route.query.data);
    this.SaveData = JSON.parse(this.$route.query.data1);
    this.getData();
    this.getFile();
  },
};
</script>

<style lang="scss">
#ZQTJGZL {
  .footer {
    text-align: center;
    padding: 10px 0;
  }

  height: 100vh;
  overflow: auto;

  .van-radio__label {
    width: 48px;
  }

  /*padding:  10px;*/
  table,
  table tr th,
  table tr td {
    border: 1px solid #000000;
    text-align: center;
  }
}
</style>
